<template>
  <view class="bigbox">
    <view class="onebox">
      <view class="" style="width: 80%;">
        <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
      </view>
      <view class="" style="color: aqua;display: flex;" @click="showsx = !showsx">
        筛选
        <u-icon v-if="!showsx" name="arrow-down" style="margin-left: 10rpx;"></u-icon>
        <u-icon v-else name="arrow-up" style="margin-left: 10rpx;"></u-icon>
      </view>

    </view>
    <transition name="fade">
    <view class="sxbox" v-show="showsx">

           <view class="xzbox" @click="show1 = true">
              {{Text1}}
              <u-icon name="arrow-down" style="margin-left: 10rpx;"></u-icon>
            </view>
            <view class="xzbox">
              xxxx2
              <u-icon name="arrow-down" style="margin-left: 10rpx;"></u-icon>
            </view>
            <view class="xzbox">
              xxxx3
              <u-icon name="arrow-down" style="margin-left: 10rpx;"></u-icon>
            </view>
    </view>
     </transition>
    <!-- ·列表 -->
    <view class="">
      
    </view>
    <scroll-view scroll-y="true" class="scrollview">
  <view class="listbox" v-for="(item,index) in 24">
    <view class="handbox">
      
    </view>
    <view class="textbox">
      列表外面显示 3-5个基本信息，点击进去详细信息
    </view>
  </view>
    </scroll-view>
  
    <!-- 下拉 -->
    <u-picker :show="show1" :columns="columns" @confirm='confirm'></u-picker>
  </view>
</template>

<script>

  export default {
    data() {
      return {
        keyword: '遥看瀑布挂前川',
        showsx:false,
        show1: false,
        Text1: 'xx筛选',
        columns: [
          ['111', '222', '333']
        ],
      }
    },
    onLoad() {

    },
    methods: {
      confirm(item) {
        this.Text1 = item.value[0]
        this.show1 = false
      }

    }
  }
</script>


<style lang="scss" scoped>
  .bigbox {
    width: 100%;
    // height: calc(100vh - 90rpx);
    background: #F5F5F5;
    // padding: 0 62rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .onebox {
      padding-left: 20rpx;
      padding-right: 20rpx;
      width: 100%;
      height: 100rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-evenly;

    }

    .sxbox {
      width: 100%;
      height: 80rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-evenly;

   
      .xzbox {
        display: flex;
        align-items: center;
        height: 50rpx;
        width: 150rpx;
        // background-color: red;
        text-align: center;
      }
   
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.6s;
    }
    
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }
    .listbox {
      width: 90%;
      height: 150rpx;
      background-color: #fff;
      margin-top: 30rpx;
      margin-bottom: 20rpx;
      border-radius: 30rpx;
      margin-left: 5%;
      display: flex;
      justify-content: center;
      align-items: center;
      .handbox {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        background-color: blue;
      }
      .textbox {
      font-size: 20rpx;
      }
    }
    .scrollview {
      height: 100vh;
    }
    

  }
</style>